* {
  box-sizing: inherit;
}

body {
  margin: 0;
  box-sizing: border-box;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background: #333;
}

.global-loading {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  z-index: 0;

  $items: 10;
  $step: 4s;
  $interleaving: .5s;
  $height: 30px;

  .slider-wrapper {
    font-family: 'Roboto Mono', monospace;
    position: relative;
    height: $height;
    width: 300px;
    margin-top: 20px;
  }

  .slider {
    font-size: 12px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: $height;
    text-align: center;
    background: rgba(0,0,0,.18);
    color: rgba(255,255,255,.7);

    animation: slider-animation (($step - $interleaving) * $items) ease infinite;

    clip-path: inset(0 100% 0 0);

    &:after {
      content: '...';
      animation: slider-tail-animation (($step - $interleaving) * $items) ease infinite;
    }

    @for $i from 1 through $items {
      &:nth-child(#{$i}) {
        animation-delay: ($step - $interleaving) * ($i - 1);

        &:after {
          animation-delay: ($step - $interleaving) * ($i - 1);
        }
      }
    }
  }

  $factor: $step / ($step - $interleaving) / $items;

  @keyframes slider-animation {
    0% {
      clip-path: inset(0 100% 0 0);
      transform: translateX(-10px);
    }

    #{(20% * $factor)}, #{(80% * $factor)} {
      clip-path: inset(0);
      transform: translateX(0);
    }

    #{(100% * $factor)}, 100% {
      clip-path: inset(0 0 0 100%);
      transform: translateX(10px);
    }
  }

  @keyframes slider-tail-animation {
    0%, #{(25% * $factor)} {
      opacity: 1;
    }

    #{(30.1% * $factor)}, #{(35% * $factor)} {
      opacity: 0;
    }

    #{(35.1% * $factor)}, #{(40% * $factor)} {
      opacity: 1;
    }

    #{(40.1% * $factor)}, #{(45% * $factor)} {
      opacity: 0;
    }

    #{(45.1% * $factor)}, 100% {
      opacity: 1;
    }
  }
}

.loading {
  width: 40px;
  height: 40px;
  position: relative;

  border: #121212 5px solid;
  box-sizing: border-box;
  border-radius: 100%;

  &:before, &:after {
    content: '';
    position: absolute;

    left: -5px;
    right: -5px;
    top: -5px;
    bottom: -5px;

    border-radius: 100%;
    border: transparent 5px solid;
  }

  &:before {
    border-top-color: #FFC738;
    animation: rotate infinite ease 3.5s;
  }

  &:after {
    border-bottom-color: #57FFF2;

    animation: rotate infinite linear 3s;

    mix-blend-mode: exclusion;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(720deg);
    }
  }
}
